import React from 'react';
import { Tabs, Form, Drawer } from 'antd';
import { connect } from 'dva';
import All from './all';
// import Approved from "./approved";
import Pending from './pending';
import Refunded from './refunded';
import OrderDetail from './orderDetail';
import Approved from './approved';
import Rejected from './rejected';
import ToBeRefunded from './toBeRefuned';
import AllOrders from './allorders';
// import
import styles from './index.less';
import { routerRedux } from 'dva/router';

const { TabPane } = Tabs;
const namespace = 'returnManagement';
/**
 *  登录界面
 */
@connect(({ loading, returnManagement }) => ({
  //控制状态，绑定事件
  loading: loading.effects['returnManagement/fetch'],
  tabCurrent: returnManagement.tabCurrent,
  curItem: returnManagement.curItem,
  showDrawer: returnManagement.showDrawer
}))
@Form.create()
class AllReturn extends React.Component {
  handleChangeTab = current => {
    // console.log(current);
    this.props.dispatch(routerRedux.push(current));
    // routerRedux.push('/Pending');
    // this.props.dispatch({
    //   type: `${namespace}/fetch`,
    //   payload: {
    //     status: current !== 0 ? current : ''
    //   }
    // });
    // this.props.dispatch({
    //   type: `${namespace}/save`,
    //   payload: {
    //     tabCurrent: current
    //   }
    // });
  };
  showDrawer(params) {
    this.props.dispatch({
      type: `${namespace}/save`,
      payload: {
        curItem: params,
        showDrawer: true
      }
    });
  }
  onClose() {
    this.props.dispatch({
      type: `${namespace}/save`,
      payload: {
        curItem: null,
        showDrawer: false
      }
    });
  }
  render() {
    const { tabCurrent, curItem, showDrawer } = this.props;
    const OrderDetailProps = {
      detailData: curItem
    };
    return (
      <div className={styles.allReturn}>
        <h2> Return orders</h2>
        <Tabs activeKey={tabCurrent} onChange={this.handleChangeTab}>
          <TabPane tab="All orders" key="/allorders">
            <AllOrders handleDrawer={this.showDrawer.bind(this)} />
          </TabPane>
          <TabPane tab="All returns" key="/allreturns">
            <All handleDrawer={this.showDrawer.bind(this)} />
          </TabPane>
          <TabPane tab="Pending" key="/Pending">
            <Pending handleDrawer={this.showDrawer.bind(this)} />
          </TabPane>
          <TabPane tab="Approved" key="/Approved">
            <Approved handleDrawer={this.showDrawer.bind(this)} />
          </TabPane>
          <TabPane tab="To be refunded" key="/toBerefunded">
            <ToBeRefunded handleDrawer={this.showDrawer.bind(this)} />
          </TabPane>
          <TabPane tab="Rejected" key="/Rejected">
            <Rejected handleDrawer={this.showDrawer.bind(this)} />
          </TabPane>
          <TabPane tab="Refunded" key="/Refunded">
            <Refunded handleDrawer={this.showDrawer.bind(this)} />
          </TabPane>
        </Tabs>
        <Drawer
          placement="right"
          width="80%"
          closable={false}
          onClose={() => this.onClose()}
          visible={showDrawer}
          destroyOnClose={true}
        >
          <OrderDetail {...OrderDetailProps} />
        </Drawer>
      </div>
    );
  }
}
export default AllReturn;
